<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <title>每日答题</title>
    <style>
        .swiper-button-disabled{
            display:none;
        }
    </style>
</head>
<body class="whiteBg">
<!--头部-->
<div class="daohanglan_box">
    <div class="title">
        <i class="icon iconfont icon-iconfontjiantou1"></i>
        <h4>每日答题</h4>
        <a href="抽奖规则.html" class="drawBtn">抽奖规则&gt;</a>
    </div>
</div>
<div class="mind">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <dl class="swiper-slide">
                <dt><span>1.</span>“大煮干丝”是哪个菜系的代表菜之一</dt>
                <dd><span>A.</span>四川菜系</dd>
                <dd><span>B.</span>山东菜系</dd>
                <dd><span>C.</span>广东菜系</dd>
                <dd><span>D.</span>淮扬菜系</dd>
            </dl>
            <dl class="swiper-slide">
                <dt><span>2.</span>“大煮干丝”是哪个菜系的代表菜之一</dt>
                <dd><span>A.</span>四川菜系</dd>
                <dd><span>B.</span>山东菜系</dd>
                <dd><span>C.</span>广东菜系</dd>
                <dd><span>D.</span>淮扬菜系</dd>
            </dl>
            <dl class="swiper-slide">
                <dt><span>3.</span>“大煮干丝”是哪个菜系的代表菜之一</dt>
                <dd><span>A.</span>四川菜系</dd>
                <dd><span>B.</span>山东菜系</dd>
                <dd><span>C.</span>广东菜系</dd>
                <dd><span>D.</span>淮扬菜系</dd>
            </dl>
            <dl class="swiper-slide">
                <dt><span>4.</span>“大煮干丝”是哪个菜系的代表菜之一</dt>
                <dd><span>A.</span>四川菜系</dd>
                <dd><span>B.</span>山东菜系</dd>
                <dd><span>C.</span>广东菜系</dd>
                <dd><span>D.</span>淮扬菜系</dd>
            </dl>
            <dl class="swiper-slide">
                <dt><span>5.</span>“大煮干丝”是哪个菜系的代表菜之一</dt>
                <dd><span>A.</span>四川菜系</dd>
                <dd><span>B.</span>山东菜系</dd>
                <dd><span>C.</span>广东菜系</dd>
                <dd><span>D.</span>淮扬菜系</dd>
            </dl>
        </div>
        <div class="swiper-pagination"></div>
        <span class="swiper-button-next swiper-button-blue">下一题</span>
        <button class="sendBtn">提交</button>
    </div>
</div>
<script src="js/swiper.min.js" type="text/javascript"></script>
<script src="js/layer.js" type="text/javascript"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">

    //题目轮播
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination'
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },
        //没有题目后显示提交
        on: {
            slideChangeTransitionEnd: function(){
                $("#curnum").text(this.activeIndex+1);//切换结束时，告诉我现在是第几个slide
                if(this.isEnd){
                    this.navigation.$nextEl.css('display','none');
                    $(".sendBtn").css('display','inherit');
                }else{
                    this.navigation.$nextEl.css('display','block');
                    $(".sendBtn").css('display','none');
                }
            }
        }
    });
    //选择答案
    $("dl.swiper-slide dd").click(function(){
        $(this).parent("dl").find("dd").removeClass("chance");
        $(this).addClass("chance");
        var indexnum = $(this).parent("dl").index();
        $(".swiper-pagination span").eq(indexnum).addClass("curr");
    });

    //交卷
    $(".sendBtn").click(function(){
        var lengths = $(".swiper-pagination span.curr").length;
        console.log(lengths)
        $(".swiper-pagination").hide();
        layer.open({
            content: '亲，确定要交卷了吗？'
            ,btn: ['确定', '取消']
            ,yes: function(index){
//                location.reload();
                layer.close(index);
//                layer.open({
//                shadeClose: false,
//                    content: '\<\div id="answerTip">' +
//                '<span class="close">×</span>'+
//                    '<h4>答题成功</h4>'+
//                    '<img src="images/successIcon.png" alt=""/>'+
//                    '<p>恭喜你答对了<span class="nub yellow">4</span>题，获得</br><span class="yellow">1次抽奖机会</p>'+
//                    '<button type="button" class="Btn drawBtn">去抽奖</button>'+
//                    '\<\/div>'
//                });
                layer.open({
                    shadeClose: false,
                    content: '\<\div id="answerTip">' +
                    '<span class="close">×</span>'+
                    '<h4>答题失败</h4>'+
                    '<img src="images/failIcon.png" alt=""/>'+
                    '<p>你答错了<span class="nub red">4</span>题，</br>很遗憾，答题失败</p>'+
                    '<button type="button" class="Btn gray closeBtn">确定</button>'+
                    '\<\/div>'
                });
            }
        });
    });

    //答题成功跳转
    $("body").on("click", ".drawBtn",function(){

    });

    //答题失败关闭弹窗
    $("body").on("click",".closeBtn",function(){
        layer.closeAll();
    });
    $("body").on("click",".close",function(){
        layer.closeAll();
    });


</script>
</body>
</html>